import TableList from '@/components/TableList';
import { PageContainer } from '@ant-design/pro-components';
import '@umijs/max';
import { useRef, useState } from "react";
import { dataReportTraffic } from './service';

const DataReportTrafficMgr = () => {
  const [selectRecord, setSelectRecord] = useState(null);
  const tableRef = useRef();

  const columns = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 50,
    },
    {
      title: 'ID',
      dataIndex: 'id',
      width: 100,
      hideInSearch: true,
      hidden: true
    },
    {
      title: '端口映射名称',
      dataIndex: 'portMappingName',
      width: 200,
    },
    {
      title: '统计日期',
      dataIndex: 'timeTag',
      width: 200,
    },
    {
      title: '接收字节',
      dataIndex: 'recBytes',
      width: 80,
      hideInSearch: true,
    },

    {
      title: '发送字节',
      dataIndex: 'sendBytes',
      width: 80,
      hideInSearch: true,
    },
  ];

  return (
    <PageContainer>
      <TableList
        tableRef={tableRef}
        columns={columns}
        keyName="id"
        labelWidth={95}
        tableRequest={dataReportTraffic}
        // toolBarLeftArea="连接历史"
      />
    </PageContainer>
  );
};
export default DataReportTrafficMgr;
